<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: left;" type="primary" @click="addbtn">添加分类</el-button>
        <el-input v-model="keyword" placeholder="请输入关键字" style="float:right;width:600px">
          <el-button slot="append" icon="el-icon-search" @click="searchBtn" />
        </el-input>
      </div>
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="图片"
            width="180"
          >
            <template v-slot="obj">
              <img class="cover" :src="obj.row.image" alt="">
            </template>
          </el-table-column>
          <el-table-column
            prop="title"
            label="标题"
            width="180"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          />
          <el-table-column
            label="操作"
            width="180"
          >
            <template v-slot="obj">
              <el-button type="primary" size="small" style="width:50px" @click="btnEdit(obj.row.id)">编辑</el-button>
              <el-button type="danger" size="small" style="width:50px" @click="btnDel(obj.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-row type="flex" justify="center" align="middle" style="height: 60px">
        <el-pagination :total="total" :page-size="pageConfig._limit" layout="prev, pager, next" @current-change="currentChange" />
      </el-row>
    </el-card>
    <dialogVue ref="dialogVue" :show-dialog="isShowDialog" />
  </div>
</template>

<script>
import { getCategories, getCategoriesCount, delCategory, getCategoriesById } from '@/api/categories'
import dialogVue from './components/dialogVue.vue'

export default {
  components: { dialogVue },
  data() {
    return {
      keyword: '',
      // 分页
      total: 0,
      pageConfig: {
        _limit: 2,
        _start: 0
      },
      tableData: [],
      isShowDialog: false
    }
  },
  created() {
    this.loadPage()
  },
  methods: {
    // 搜索
    async searchBtn() {
      this.loadPage()
    },
    //   页面渲染
    async loadPage() {
      const res = await getCategories({ ...this.pageConfig, title_contains: this.keyword.trim() })
      console.log(157, res)
      this.tableData = res.data
      this.getTotal()
    },
    // 获取分类数量
    async  getTotal() {
      const res = await getCategoriesCount()
      // console.log(136, res)
      this.total = res.data
    },
    // 分页
    currentChange(newPage) {
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      this.loadPage()
    },
    // 添加按钮
    addbtn() {
      this.isShowDialog = true
    },
    // 编辑按钮
    async  btnEdit(id) {
      // 发请求获得数据
      const res = await getCategoriesById(id)
      this.isShowDialog = true
      // console.log(102, res)
      this.$nextTick(() => {
        this.$refs.dialogVue.formData = res.data
      })

      console.log(102, this.$refs.dialogVue.formData)
    },
    // 删除按钮
    async btnDel(id) {
      try {
        // 二次询问
        await this.$confirm('是否删除')
        // 发请求
        await delCategory(id)
        // 提示用户
        this.$message.success('操作成功')
        // 页面重新加载
        this.loadPage()
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style>
.cover{
  width: 112px;
height: 88px;
 /* object-fit: cover; */
object-fit: cover;
}
</style>
